import React, { Component, Suspense } from "react";
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet,
  useNavigate,
  useRoutes,
  useParams,
  useLocation,
  
} from "react-router-dom";
import "./index.css";
const Home = () => {
  return (
    <>
      <div>默认页面</div>
    </>
  );
};
const Login = () => {
  return (
    <>
      <div>这是login</div>
    </>
  );
};
const News = () => {
  const Nav = useNavigate();
  return (
    <>
      <div onClick={() => Nav("/news/a/123")}>这是news页面</div>
      <Outlet></Outlet>
    </>
  );
};

const LazyCom = React.lazy(() => import("./LazyC"));
const Xixi = () => {
  return (
    <>
      <div>这是Xixi的子页面</div>
    </>
  );
};
function Loading(){
  return <>
    loading............
  </>
}
let routes = [
  {
    path: "/",
    element: <Home></Home>,
  },
  {
    path: "/login",
    element: <Login></Login>,
  },
  {
    path: "/news",
    element: <News></News>,
    children: [
      {
        path: "/news/a/:id",
        element: (
          <Suspense
            fallback={<Loading></Loading>}
          >
            <LazyCom></LazyCom>
          </Suspense>
        ),
      },
    ],
  },
  {
    path: "/xixi",
    element: <Xixi></Xixi>,
  },
];
const Routering = () => useRoutes(routes);
export default function UseRoutess() {
  return (
    <>
      <BrowserRouter>
        <Routering></Routering>
      </BrowserRouter>
    </>
  );
}
